Create Dropdowns hover/click effect
HTML
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>Make dropdown's button</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="main">
<!-- --------------------------Hover Effect------------------------------ -->
<div class="hv-eff">
<h4> Hover effect</h4>
<button class="button">Our Links<i class="fa fa-angle-down" aria-hidden="true"></i></button>
<div class="content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<!-- --------------------------Click effect------------------------------ -->
<div class="cl-eff">
<h4>Click Effect</h4>
<button onclick="myFunction()" class="button1">Our links<i class="fa fa-angle-down" aria-hidden="true"></i></button>
<div class="content1" id="content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script type="text/javascript">
function myFunction() {
document.getElementById("content").classList.toggle("show");
}
//to hide content when you click anywhere
window.onclick = function(event) {
if (!event.target.matches('.button1')){
var dropdowns = document.getElementsByClassName("content1");
var i;
for (i = 0; i < dropdowns.length; i++) {
var opendropdown = dropdowns[i];
if(opendropdown.classList.contains('show')){
opendropdown.classList.remove('show');
}
}
}
}
</script>
<div style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"><a target="_blank" href="https://www.freewebhostingarea.com" title="Free Web Hosting with PHP8"><img alt="Free Web Hosting" src="https://www.freewebhostingarea.com/images/poweredby.png" style="border-width: 0px;width: 180px; height: 45px; float: right;"></a></div>
</body>
</html>
]]>
CSS
<![CDATA[
*{
text-decoration: none;
padding: 0;
margin: 0;
font-family: Montserrat;
color: #fff;
}
body{
background: #ccc;
}
.main{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: inline-flex;
}
.hv-eff{
padding: 0 15px;
display: block;
}
.hv-eff h4{
padding: 10px 0;
}
.button{
background: #e74c3c;
padding: 16px;
font-size: 16px;
outline: none;
border: none;
cursor: pointer;
text-transform: uppercase;
}
.button i{
padding: 0 5px;
padding-left: 7px;
}
.content{
display: block;
background: #6f6f6f;
position: absolute;
transform: scale(0);
transition: .3s;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.content a{
display: block;
font-size: 16px;
padding: 12px 48.5px;
transition: .2s
}
.content a:hover{
background: #cccccca6;
}
.hv-eff:hover .content{
transform: scale(1);
}
/*--------------------------Click effect------------------------------ */
.cl-eff{
padding: 0 15px;
display: block;
}
.cl-eff h4{
padding: 10px 0;
}
.button1{
background: #e74c3c;
padding: 16px;
font-size: 16px;
outline: none;
border: none;
cursor: pointer;
text-transform: uppercase;
}
.button1 i{
padding: 0 5px;
padding-left: 7px;
}
.content1{
display: block;
background: #6f6f6f;
position: absolute;
transform: scale(0);
transition: .3s;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.content1 a{
display: block;
font-size: 16px;
padding: 12px 49px;
transition: .2s
}
.content1 a:hover{
background: #cccccca6;
}
.show{
transform: scale(1);
}
]]>
